<script setup>
import { ref, onMounted } from 'vue'
import { sign } from '@/api/user'
import { showToast } from 'vant'
import { gsap } from 'gsap'

const points = ref(888)
const signedToday = ref(false)
const signDays = ref(3)
const pointsHistory = ref([
  { type: '签到', points: 10, date: '2024-03-20' },
  { type: '发帖', points: 20, date: '2024-03-19' },
  { type: '评论', points: 5, date: '2024-03-18' }
])

const handleSign = async () => {
  try {
    const res = await sign()
    if(res.code === 200) {
      showToast({
        message: '签到成功',
        icon: 'success',
        position: 'center',
        duration: 1500
      })
      signedToday.value = true
      points.value += 10
      signDays.value++
      pointsHistory.value.unshift({
        type: '签到',
        points: 10,
        date: new Date().toLocaleDateString()
      })
      animatePoints()
    }
  } catch (error) {
    showToast({
      message: '签到失败',
      icon: 'fail',
      position: 'center'
    })
  }
}

const animatePoints = () => {
  gsap.from('.points-number', {
    textContent: points.value - 10,
    duration: 1,
    ease: 'power1.out',
    snap: { textContent: 1 },
    stagger: {
      each: 0.1,
      onUpdate: function() {
        this.targets()[0].innerHTML = Math.ceil(this.targets()[0].textContent)
      },
    }
  })
}

onMounted(() => {
  const today = new Date().toLocaleDateString()
  signedToday.value = pointsHistory.value[0]?.date === today
})
</script>

<template>
  <div class="points-page">
    <van-nav-bar
      title="我的积分"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="points-header">
      <div class="points-card">
        <div class="card-content">
          <span class="points-label">当前积分</span>
          <div class="points-number">{{ points }}</div>
          <div class="sign-info">
            <span>已连续签到 {{ signDays }} 天</span>
            <van-button 
              :class="['sign-btn', { 'signed': signedToday }]"
              :disabled="signedToday"
              @click="handleSign"
            >
              <template v-if="!signedToday">
                <van-icon name="gift-o" />
                <span>签到领积分</span>
              </template>
              <template v-else>
                <van-icon name="success" />
                <span>今日已签到</span>
              </template>
            </van-button>
          </div>
        </div>
        <div class="floating-circles">
          <div v-for="i in 6" :key="i" class="circle"></div>
        </div>
      </div>
    </div>

    <!-- 积分规则 -->
    <div class="points-rules">
      <h3>积分规则</h3>
      <div class="rules-grid">
        <div class="rule-item">
          <van-icon name="sign" />
          <div class="rule-text">
            <span>每日签到</span>
            <span class="points">+10分</span>
          </div>
        </div>
        <div class="rule-item">
          <van-icon name="edit" />
          <div class="rule-text">
            <span>发布文章</span>
            <span class="points">+20分</span>
          </div>
        </div>
        <div class="rule-item">
          <van-icon name="comment-o" />
          <div class="rule-text">
            <span>评论</span>
            <span class="points">+5分</span>
          </div>
        </div>
        <div class="rule-item">
          <van-icon name="like" />
          <div class="rule-text">
            <span>点赞</span>
            <span class="points">+2分</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分记录 -->
    <div class="points-history">
      <h3>积分记录</h3>
      <div class="history-list">
        <div 
          v-for="(record, index) in pointsHistory" 
          :key="index"
          class="history-item"
        >
          <div class="record-info">
            <span class="record-type">{{ record.type }}</span>
            <span class="record-date">{{ record.date }}</span>
          </div>
          <span class="record-points">+{{ record.points }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.points-page {
  min-height: 120vh;
  background: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
  .van-nav-bar {
    background: transparent;
    
    :deep(.van-nav-bar__title) {
      color: white;
    }
    
    :deep(.van-icon) {
      color: white;
    }
  }

  .points-header {
    padding: 20px;
    
    .points-card {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      position: relative;
      overflow: hidden;
      
      .sign-btn {
        margin-top: 20px;
        background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
        border: none;
        border-radius: 25px;
        color: white;
        font-weight: 500;
        padding: 10px 24px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        transition: all 0.3s;
        
        &:not(:disabled):active {
          transform: scale(0.95);
        }
        
        &.signed {
          background: #8e8e8e;
          opacity: 0.8;
        }
        
        .van-icon {
          font-size: 18px;
        }
      }
      
      .card-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: white;
        
        .points-label {
          font-size: 16px;
          opacity: 0.8;
        }
        
        .points-number {
          font-size: 48px;
          font-weight: bold;
          margin: 10px 0;
          animation: countUp 1s ease-out;
        }
      }
      
      .floating-circles {
        position: absolute;
        inset: 0;
        z-index: 1;
        
        .circle {
          position: absolute;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          animation: float 20s infinite linear;
          
          &:nth-child(1) { width: 60px; height: 60px; left: 10%; top: 20%; }
          &:nth-child(2) { width: 80px; height: 80px; left: 30%; top: 50%; }
          &:nth-child(3) { width: 40px; height: 40px; left: 50%; top: 30%; }
          &:nth-child(4) { width: 70px; height: 70px; left: 70%; top: 60%; }
          &:nth-child(5) { width: 50px; height: 50px; left: 85%; top: 40%; }
          &:nth-child(6) { width: 45px; height: 45px; left: 20%; top: 80%; }
        }
      }
    }
  }

  .points-rules {
    margin: 20px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    .rules-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 16px;

      .rule-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #f8f8f8;
        border-radius: 12px;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-2px);
        }

        .van-icon {
          font-size: 24px;
          color: #6B73FF;
        }

        .rule-text {
          display: flex;
          flex-direction: column;
          
          .points {
            color: #6B73FF;
            font-weight: 500;
          }
        }
      }
    }
  }

  .points-history {
    margin: 20px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;
      animation: slideIn 0.3s ease-out;

      &:last-child {
        border-bottom: none;
      }

      .record-info {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .record-date {
          font-size: 12px;
          color: #999;
        }
      }

      .record-points {
        color: #6B73FF;
        font-weight: 500;
      }
    }
  }
}

@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes float {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style> 